<template>
    <el-dialog v-model="visible" title="分配角色" :before-close="cancel">
        <el-form :model="form">
            <el-form-item label="帐号" :label-width="100">
                <el-input v-model="form.username" placeholder="请输入帐号" />
            </el-form-item>
            <el-form-item label="姓名" :label-width="100">
                <el-input v-model="form.nickName" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="邮箱" :label-width="100">
                <el-input v-model="form.email" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item label="密码" :label-width="100">
                <el-input v-model="form.password" type="password" readonly placeholder="请输入密码" />
            </el-form-item>
            <el-form-item label="备注" :label-width="100">
                <el-input v-model="form.note" :rows="2" type="textarea" placeholder="请输入备注" resize="none" />
            </el-form-item>
            <el-form-item label="是否启用" :label-width="100">
                <el-radio-group v-model="form.status" class="ml-4">
                    <el-radio :label="1" size="large">是</el-radio>
                    <el-radio :label="0" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import {  ref, withDefaults, watch } from "vue";
import { adminUpdateAPi, getAdminUpdateStatusAPI } from '../../../request/api'
import { IfromDate } from '../type'


// 获取父组件属性
let props = withDefaults(defineProps<{
    visible: boolean,
    adminDate: IfromDate
}>(), {
    visible: false,
})
let form = ref({} as IfromDate)
watch(() => props.adminDate, (newVal, oldVal) => {
    if (newVal) {
        form.value = { ...newVal }
    }
})
// 获取父组件方法
let emit = defineEmits<{
    (event: 'hide'): void
}>()


// 取消
function cancel() {
    emit('hide')
     ElMessage('取消修改')
}
// 确定
function confirm() {
    ElMessageBox.confirm(
        '是否修改当前用户信息?','提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        })
        .then(() => {
            adminUpdateAPi(form.value.id, form.value)
            cancel()
            ElMessage.success('修改成功')
        })
        .catch(() => {
            ElMessage('取消修改')
        })
}
</script>
<style lang = "less" scoped>
</style>